<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习下class的写法</title>
</head>
<body>
    <div class="login-box">
        <input type="text" class="input-item">
        <button class="button1">按钮1</button>
        <button class="button2">按钮2</button>
        <div class="output-block"></div>
    </div>
</body>
</html>

<script>
    let inputRef = document.querySelector('input')
    let button1Ref = document.querySelector('.button1')
    let button2Ref = document.querySelector('.button2')
    let contentRef = document.querySelector('.output-block')

    button1Ref.addEventListener('click', () => {
        console.log('this1:', this)
        new BullshitBuilder()
    })
    button2Ref.addEventListener('click', function() {
        console.log('this2:', this)
    })
    class BullshitBuilder {
        constructor(text, name) {
            this.text = text
            this.name = name
        }

        show(){
            contentRef.innerHTML = inputRef.value
        }
    }

    class SonOfBullshitBuilder extends BullshitBuilder{
        constructor(text, name) {
            super(text, name)
            
        }

        show() {

        }

        set name1(value) {

        }

        get haha() {

        }
    }
</script>